{% extends 'stocks/base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'strategy_dashboard' %}">策略仪表板</a></li>
                    <li class="breadcrumb-item active">批量分析股票</li>
                </ol>
            </nav>
            <h2>批量分析股票</h2>
            <p class="text-muted">对所有股票执行策略分析，生成买入信号</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">分析设置</h5>
                </div>
                <div class="card-body">
                    <form id="analyzeForm" method="post" action="{% url 'analyze_all_stocks' %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="batch_size" class="form-label">每批处理股票数量</label>
                            <input type="number" class="form-control" id="batch_size" name="batch_size" value="50" min="10" max="100">
                            <div class="form-text">建议值：20-50，根据服务器性能调整</div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100" id="analyzeBtn">
                            <i class="fas fa-play"></i> 开始批量分析
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">分析说明</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> 分析过程说明</h6>
                        <ul class="mb-0">
                            <li>将对所有股票执行已启用的交易策略分析</li>
                            <li>分析过程可能需要几分钟时间，请耐心等待</li>
                            <li>分析结果将自动保存到数据库</li>
                            <li>可以在"买入信号"页面查看分析结果</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle"></i> 注意事项</h6>
                        <ul class="mb-0">
                            <li>批量分析会消耗较多系统资源</li>
                            <li>建议在服务器负载较低时执行</li>
                            <li>分析过程中请勿关闭浏览器</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">分析结果</h5>
                </div>
                <div class="card-body">
                    <div id="resultContainer" style="display: none;">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-check-circle"></i> 分析完成</h6>
                            <div id="resultContent"></div>
                        </div>
                    </div>
                    
                    <div id="progressContainer" style="display: none;">
                        <div class="progress mb-3">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 0%" id="progressBar"></div>
                        </div>
                        <div class="text-center">
                            <span id="progressText">准备开始分析...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('analyzeForm');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const resultContainer = document.getElementById('resultContainer');
    const resultContent = document.getElementById('resultContent');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 显示进度条
        progressContainer.style.display = 'block';
        analyzeBtn.disabled = true;
        analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 分析中...';
        
        const formData = new FormData(form);
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const results = data.results;
                let html = `
                    <p><strong>总股票数:</strong> ${results.total_stocks}</p>
                    <p><strong>已分析股票:</strong> ${results.analyzed_stocks}</p>
                    <p><strong>发现信号:</strong> ${results.total_signals}</p>
                    <p><strong>保存信号:</strong> ${results.saved_signals}</p>
                    <p><strong>耗时:</strong> ${results.duration}</p>
                `;
                
                if (results.errors && results.errors.length > 0) {
                    html += `<p><strong>错误:</strong> ${results.errors.length} 个</p>`;
                }
                
                resultContent.innerHTML = html;
                resultContainer.style.display = 'block';
                
                // 更新进度条到100%
                progressBar.style.width = '100%';
                progressText.textContent = '分析完成！';
                
            } else {
                resultContent.innerHTML = `<p class="text-danger">分析失败: ${data.error}</p>`;
                resultContainer.style.display = 'block';
            }
        })
        .catch(error => {
            resultContent.innerHTML = `<p class="text-danger">请求失败: ${error}</p>`;
            resultContainer.style.display = 'block';
        })
        .finally(() => {
            analyzeBtn.disabled = false;
            analyzeBtn.innerHTML = '<i class="fas fa-play"></i> 开始批量分析';
        });
    });
});
</script>
{% endblock %}
